<template>
	<shop-select-table
		ref="shopSelectTableRef"
		v-model="value"
		:title="t('选择商铺')"
		:service="service.agent.agent"
		:apiPage="'getAgentShopList'"
		:columns="columns"
		:multiple="multiple"
		:dict="{ text: 'name', id: 'id' }"
		:shopName="shopName"
		pickerType="text"
	/>
</template>

<script setup lang="ts">
defineOptions({
	name: 'shop-select'
});

import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { CrudProps } from '/#/crud';
import { reactive, ref, useModel, watch } from 'vue';
import ShopSelectTable from './shop-select-table.vue';

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: Boolean,
	shopObj: {
		type: Object,
		default: () => ({})
	}
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, 'modelValue');
const shopSelectTableRef = ref();
const shopName = ref('');

// 监听shopObj变化，更新modelValue
watch(
	() => props.shopObj,
	newShopObj => {
		if (newShopObj && newShopObj.id) {
			value.value = newShopObj.id;
			shopName.value = newShopObj.name || '';
		}
	},
	{ immediate: true, deep: true }
);

// 清空数据
function clearTableData() {
	if (shopSelectTableRef.value && shopSelectTableRef.value.clearData) {
		shopSelectTableRef.value.clearData();
	}
}

defineExpose({
	clearTableData
});

const columns = ref([
	{ label: t('ID'), prop: 'id', minWidth: 140 },
	{ label: t('商铺名称'), prop: 'name', minWidth: 140 }
]);
</script>
